<template>
  <h3 @click="show=true">Monaco Editor Vue3</h3>
  <el-dialog width="100%" v-model="show">
    <vue-monaco-editor
        theme="vs"
        v-if="showEdit"
        :options="options"
        language="javascript"
        :width="800"
        :height="600"
        v-model:value="test"
    ></vue-monaco-editor>
  </el-dialog>

</template>
<script>


export default {
  components: {},
  watch:{
    show(){
      this.$nextTick(()=>this.showEdit=true)
    }
  },
  data() {
    return {
      show: false,
      showEdit:false,
      options: {
        colorDecorators: true,
        lineHeight: 24,
        tabSize: 2,
      },
      test: '',
    };
  },
};
</script>
<style scoped></style>
